<template>
  <div class="app-container">
    <div class="header">
      <div class="header-title">交付启动会</div>
      <div class="header-btn">
        <dc-select-dialog
          v-model="projectId"
          objectName="project"
          returnType="string"
          title="创建交付启动会"
          :multiple="false"
          :multiple-limit="1"
          :params="{
            itSADraft: true,
          }"
          @change="changeProject"
        >
          <el-button type="primary" icon="Plus">新增</el-button>
        </dc-select-dialog>
      </div>
    </div>
    <el-form
      class="search-container"
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      @keyup.enter="handleQuery"
    >
      <!-- 在此添加搜索项 -->
      <el-form-item label="项目名称" prop="projectId">
        <!-- <el-input v-model="queryParams.projectId" placeholder="请输入项目名称" clearable /> -->
        <dc-select-dialog
          v-model="queryParams.projectId"
          placeholder="请选择项目"
          objectName="project"
          type="input"
          :multiple="false"
          :multiple-limit="1"
          :clearable="true"
          :disabled="isShow"
        />
      </el-form-item>
      <el-form-item label="创建人" prop="createUser">
        <dc-select-user
          v-model="queryParams.createUser"
          placeholder="请选择创建人"
          returnType="string"
          :multiple="false"
          :multiple-limit="1"
          @click.stop
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查找</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="body-container">
      <div class="table-container">
        <el-table v-loading="loading" :data="dataList">
          <el-table-column type="selection" width="55" />
          <el-table-column label="序号" width="60" type="index" align="center">
            <template #default="scoped">
              <span>{{ (queryParams.current - 1) * queryParams.size + scoped.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="项目名称" align="center" width="140" show-overflow-tooltip>
            <template #default="scoped">
              <dc-view v-model="scoped.row.projectId" objectName="project" />
            </template>
          </el-table-column>
          <el-table-column label="创建人" align="center" width="100">
            <template #default="scoped">
              <dc-view v-model="scoped.row.createUser" objectName="user" showKey="realName" />
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" width="160">
            <template #default="scoped">
              {{ scoped.row.createTime || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="附件" align="center" width="160">
            <template #default="scoped">
              <dc-upload
                v-model="scoped.row.fileIds"
                :isUpload="false"
                :isRemove="false"
                :targetType="Const.targetType.CUSTOMER_RLIST"
              />
            </template>
          </el-table-column>
          <el-table-column label="备注说明" align="center" min-width="160">
            <template #default="scoped">
              {{ scoped.row.remark || '-' }}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center" width="150">
            <template #default="scoped">
              <el-button link type="primary" @click="handleCheck(scoped.row)">查看</el-button>
              <el-button link type="primary" @click="handleDelete(scoped.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <dc-pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.current"
      v-model:limit="queryParams.size"
      @pagination="getData"
    />
  </div>
</template>

<script setup name="ComponentName">
import { reactive, toRefs, onMounted, getCurrentInstance } from 'vue';
import Api from '@/api/index';
import Const from '@/const'; // 根据实际路径调整导入
import { useRouter } from 'vue-router';

const router = useRouter();
const { proxy } = getCurrentInstance();

const pageData = reactive({
  loading: false,
  projectId: null,
  queryParams: {
    current: 1,
    size: 10,
  },
  dataList: [],
  total: 0,
});

const { loading, projectId, queryParams, dataList, total } = toRefs(pageData);

onMounted(() => {
  getData();
});

const getData = async () => {
  try {
    loading.value = true;
    const params = {
      ...queryParams.value,
      projectId:queryParams.value.projectId?.id
          ? queryParams.value.projectId.id
          : queryParams.value.projectId,
    }
    const res = await Api.pdp.deliverystart.list(params);
    const { code, data } = res.data;
    if (code === 200) {
      console.log(data.records);
      dataList.value = data.records;
      total.value = data.total;
    }
  } catch (err) {
    console.error(err);
  } finally {
    loading.value = false;
  }
};

const handleDelete = row => {
  const ids = row.id;
  proxy
    .$confirm(`确定将“[${ids}]”数据删除?`, {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    .then(() => Api.pdp.deliverystart.remove({ ids }))
    .then(() => {
      proxy.$message({
        type: 'success',
        message: '操作成功!',
      });
      getData();
    });
};

const handleQuery = () => {
  queryParams.value.current = 1;
  getData();
};

const resetQuery = () => {
  Object.assign(queryParams.value, {
    current: 1,
    size: 10,
  });
  proxy.resetForm('queryRef');
  getData();
};

// 确认项目名称
const changeProject = async project => {
  const params = {
    projectId: project?.id,
  };
  const res = await Api.pdp.deliverystart.submit(params);
  const { code, data } = res.data;
  if (code == 200) {
    router.push({
      name: '交付启动会新增',
      path: 'deliverystart/submit',
      params: { id: data.id },
    });
  }
};

// 查看
const handleCheck = async row => {
  router.push({
    name: '交付启动会编辑',
    path: 'deliverystart/submit',
    params: { id: row.id },
  });
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #dadbe0;
  padding: 0 0 16px 0;

  &-title {
    font-weight: bold;
    font-size: 18px;
    color: #333333;
    line-height: 18px;
  }
}

.search-container {
  margin-top: 16px;
}
</style>
